<template>
	<view class="fill-width-height flex-col app_container pagecontent appIndexContain" :class="$thatThemeClassName">
		<uv-grid :col="3">
			<uv-grid-item v-for="(item,index) in applicationList" :key="index">
				<view class="applicationContanter flex-col justify-center align-center" @click="goToWebView(item.appUrl,item)">
					<view class="app_icon_img">
						<img v-if="item.iconUrl" :src="item.iconUrl" class="fill-width"/>
						<uv-icon 
							v-if="item.icon" 
							:name="item.icon" 
							size="50"
							bold
							:label="item.title"
							labelPos="bottom"
							space="12px"
							:custom-prefix="item.customIcon" 
							labelColor="#fff"
							:color="'#fff'" 
							class="justify-center app_icon" 
							:class="'app_icon_'+ index"
						>
					   </uv-icon>
					</view>
				</view>
			</uv-grid-item>
		</uv-grid>
	</view>
</template>
<script>
	import sharePages from '@/framework/plugins/sharePages'
	import { applicationVisitStatistics, getAppList } from '@/api/common/common'
	export default {
		mixins: [sharePages],
		data() {
			return {
				show: false,
				currentColorIndex: 0,
				applicationList: []
			}
		},
		methods: {
			goToWebView(url,item){
				const token = uni.getStorageSync("token");
				if(!token){
					uni.showToast({
						title: '未授权，请先登录',
						mask: true,
						icon: 'none'
					})
					this.goToPage('/pages/login/index')
					return
				}
				this.goToPage(url)
				applicationVisitStatistics({appType: item.code})
			},
			async getAppList(){
				const appList = await getAppList().then(res => res.data)
				this.applicationList = appList
			},
			goToPage(url){
				uni.navigateTo({
				  url: url 
				});
			},
		},
		mounted(){
			this.show = true
			this.getAppList()
		}
	}
</script>
<style lang="scss" scoped>
	.applicationContanter{
		padding: 12px;
		border-radius: 10px;
		text-align: center;
		zoom: 1;
		cursor: pointer;
	}
	.applicationContanter:active{
		border: 1px solid #f3f3f3;
	}
	.appIndexContain{
		padding: 0px !important;
	}
	.app_icon_img{
		:deep(.uv-icon){
			border-radius: 10px;
		}
		.app_icon{
			padding: 8px;
			:deep(.uvicon){
				border-radius: 10px;
			}
		}
		:deep(.uv-icon__icon){
			padding: 8px;
		}
		.app_icon_0 :deep(.uvicon){
			background-color: #2988F8 !important;
		}
		.app_icon_1 :deep(.uvicon){
			background-color: #FEA621;
		}
		.app_icon_2 :deep(.uvicon){
			background-color: #30DABF;
		}
		.app_icon_3 :deep(.uvicon){
			background-color: #00E5EE;
		}
		.app_icon_4 :deep(.uvicon){
			background-color: #27af7d;
		}
		
		.app_icon_0 :deep(.uv-icon__icon){
			border-radius: 10px;
			background-color: #2988F8 !important;
		}
		.app_icon_1 :deep(.uv-icon__icon){
			border-radius: 10px;
			background-color: #FEA621 !important;
		}
		.app_icon_2 :deep(.uv-icon__icon){
			border-radius: 10px;
			background-color: #30DABF !important;
		}
		.app_icon_3 :deep(.uv-icon__icon){
			border-radius: 10px;
			background-color: #00E5EE !important;
		}
		.app_icon_4 :deep(.uv-icon__icon){
			border-radius: 10px;
			background-color: #27af7d !important;
		}
		
	}
	.app_title {
		font-size: 0.8rem;
		padding-top: 10px;
		font-weight: bold;
		color: #000;
	}
</style>